<template>
    <div class="pre_mark_wp">
        <div class="tab_title">
            <span>{{ typeLog }}</span>
            <i class="iconfonMy icon-guanbi" @click="ipcRenderer.send('close-preferredmarketserver')"></i>
        </div>
        <div class="message">请选择和你宽带服务商一直，并且ping值最小的服务器！</div>
        <div class="table_title">
            <span>基本行情</span>
        </div>
        <div class="list">
            <div class="item_li">
                <span class="f4">名称</span>
                <span class="f3">IP</span>
                <span class="f1">ping值</span>
                <span class="f2">网络状况</span>
                <span class="f1">负载</span>
                <span class="f1">选用</span>
                <span class="f100"></span>
            </div>
            <div class="item_li">
                <span class="f4">博富云节点 - 节点1</span>
                <span class="f3">{{ getIp(storeMain?.ConfigJsInfo?.mqttUrl?.wsMqtt_bj) }}</span>
                <span class="f1">{{ pingVal }}</span>
                <span class="f2">
                    <img class="xingxing" src="@/assets/img/星星.png" alt="" v-for="it in xinxingNum" :key="it">
                </span>
                <span class="f1"></span>
                <span class="f1"> <i class="iconfonMy icon-duigou"></i></span>
                <span class="f100"></span>
            </div>
            <div class="item_li" v-for="item in 20" :key="item">
                <span class="f4"></span>
                <span class="f3"></span>
                <span class="f1"></span>
                <span class="f2"></span>
                <span class="f1"></span>
                <span class="f1"></span>
                <span class="f100"></span>
            </div>
        </div>
        <div class="btns">
            <div class="left">
                <span>识别宽带商</span>
                <span @click="getPing">ping值检测</span>
                <span>其他</span>
            </div>
            <div class="left">
                <span>确定</span>
                <span @click="ipcRenderer.send('close-preferredmarketserver')">取消</span>
            </div>
        </div>
    </div>
</template>

<script setup>
const { ref } = require('vue')
const { ipcRenderer } = require('electron');
import { mainStore } from '@/store/index.js'
import { ElMessage } from 'element-plus';

const storeMain = mainStore()
const pingVal = ref('')
const xinxingNum = ref(0)

function getIp(val) {
    return val ? val.split('//')[1].split('/')[0].split(':')[0] : ''
}

function getPing() {
    let startTime = Date.now();
    console.log(`output->storeMain.xianlu)`, storeMain.xianlu)
    fetch(storeMain.xianlu.mnurl) // 替换为你要 ping 的 URL
        .then(() => {
            let endTime = Date.now();
            let num = endTime - startTime
            pingVal.value = num + 'ms';
            xinxingNum.value = num <= 60 ? 5 : num <= 120 ? 4 : num <= 180 ? 3 : 2;
        })
        .catch(() => {
            ElMessage({ message: 'Ping 测量失败', type: 'error' });
        });
}

</script>

<style scoped lang="less">
.pre_mark_wp {
    background-color: #f0f0f0;
    color: #000;
    height: 310px;
    width: 520px;
    overflow: hidden;

    .tab_title {
        background-color: #ebf6f9;
        color: #919191;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 25px;
        padding-left: 5px;
        -webkit-app-region: drag;

        i {
            -webkit-app-region: no-drag;
            width: 29px;
            height: 25px;
            text-align: center;
        }

        i:hover {
            background-color: #e61123;
            color: #fff;
        }
    }

    .message {
        padding: 10px;
    }

    .table_title {
        padding: 0 10px;

        span {
            border: 1px solid #e5e5e5;
            display: inline-block;
            width: 80px;
            line-height: 18px;
            background-color: #f9f9f9;
        }
    }

    .list {
        background-color: #ffffff;
        border: 1px solid #828790;
        margin: 0 10px;
        height: 178px;
        overflow: hidden;

        .item_li {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
            line-height: 20px;

            span {
                border-right: 1px solid #f0f0f0;
                height: 20px;
            }

            .f1 {
                flex: 2;
            }

            .f2 {
                flex: 3;
            }

            .f3 {
                flex: 5;
            }

            .f4 {
                flex: 6;
            }

            .f100 {
                width: 40px;
            }
        }

    }

    .btns {
        padding: 10px;
        display: flex;
        justify-content: space-between;

        div {
            display: flex;
            align-items: center;

            span {
                border: 1px solid #d0d0d0;
                border-radius: 3px;
                background: #fdfdfd;
                line-height: 20px;
                width: 70px;
                text-align: center;
                margin-right: 5px;
            }
        }
    }

    .icon-duigou {
        color: red;
        font-weight: bold;
    }

    .xingxing {
        width: 12px;
    }
}
</style>
